<include file="public@header"/>
<style>
.goodslist{
    width:160px;
    float:left;
    margin-left:10px;
    margin-top:10px;
    padding-top:5px;
    padding-bottom:5px;
    text-align: center;
    border:1px solid #d6d6c2;
}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('shop/index')}">店铺列表</a></li>
        <li><a href="{:url('shop/add')}">添加店铺</a></li>
        <li class="active"><a href="">添加店铺商品</a></li>
    </ul>
    <form class="form-horizontal js-ajax-form margin-top-20" role="form" action="{:url('shop/goods')}"
          method="post">
        <input type="hidden" name="id" value="{$id}">
        <input type="hidden" name="goodsid" id ="goodsid" value="">
        <fieldset>
            <div class="tabbable">
                <div class="tab-content">
                    <foreach name="list" item="vo">
                    <div class="tab-pane active" id="A">
                        <div class="form-group">
                            <label for="input-site-name" class="col-sm-2 control-label" style="text-align: left;">
                                <if condition="isset($vo['data'][0])">
                                <input type="checkbox" class="catecheck" value="{$vo['id']}">
                                </if>
                                &nbsp;&nbsp;&nbsp;&nbsp;{$vo.name}
                            </label>
                        </div>
                        <div class="form-group">
                            <foreach name="$vo['data']" item="vv">
                            <div class="goodslist">
                                <input type="hidden" class="vdata" value="{$vv.id}" data="1">
                                <div>名称:{$vv.name}</div>
                                <div>价格:{$vv.price}</div>
                                <img style="width:100px;height:100px;" src="{$vv.img}" alt="">
                            </div>
                            </foreach>
                        </div>
                    </div>
                    </foreach>
                    <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" style="width:150px;" class="btn btn-primary">
                                    {:lang('SAVE')}
                                </button>
                            </div>
                        </div>
                </div>
            </div>
        </fieldset>
    </form>

</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script>
$(document).ready(function(){
    var arr = '{$goods}';
    var good = $('.goodslist');
    for (var i=0;i<good.length;i++){
        var id = good.eq(i).find('input[class="vdata"]').val();
        if(arr.indexOf(id) != -1){
            good[i].style = "border:1px solid #66ff66";
            good.eq(i).children(':first').attr('data',2);
            // console.log(good.eq(i));
　　    }
    }
});
$('.catecheck').click(function(){
    var res= $(this).is(':checked');
    var next = $(this).parent().parent().next().children();
    if(res == true){
        next.children('input').attr('data',2);
        //修改样式
        for (var i=0;i<next.length;i++){
            next[i].style = "border:1px solid #66ff66";
            //next[i].children("input").attr('data',2);
        }
    }else{
        next.children('input').attr('data',1);
        for(var i=0;i<next.length;i++){
            next[i].style = "border:1px solid #d6d6c2";
        }
    }
}),
$('.goodslist').click(function(){
    var data = $(this).children(':first').attr('data');
    if(data == 1){
        $(this).children(':first').attr('data',2);
        $(this).css('border',"1px solid #66ff66");
    }else{
       $(this).children(':first').attr('data',1);
        $(this).css('border',"1px solid #d6d6c2");
    }
})
$('.btn-primary').click(function(){
    var str = '';
    $.each($("input[data='2']"), function(i,n){
        str += $(this).val() + ',';
    })
    $('#goodsid').attr('value',str);
})
</script>
</body>
</html>
